<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>万东影院 | 经理</title>
  <link th:href="@{/images/logo.svg}" rel="icon" type="image/svg+xml">
  <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
  <link th:href="@{/css/bootstrap-icons.min.css}" rel="stylesheet">
</head>
<body>

<header>
  <ul class="nav nav-tabs m-2">
    <li class="nav-item">
      <a class="nav-link disabled">
        <i class="bi bi-person-circle"></i>
        <span class="ms-1">经理</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" th:href="@{/manager/movies}">
        <i class="bi bi-film"></i>
        <span class="ms-1">电影列表</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link active">
        <i class="bi bi-pencil-square"></i>
        <span class="ms-1">编辑电影</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link">
        <i class="bi bi-camera-reels"></i>
        <span class="ms-1">放映管理</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link">
        <i class="bi bi-graph-up"></i>
        <span class="ms-1">销售数据</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" th:href="@{/manager/log}">
        <i class="bi bi-journals"></i>
        <span class="ms-1">操作日志</span>
      </a>
    </li>
    <li class="nav-item ms-auto">
      <a class="nav-link" th:href="@{/me}">
        <i class="bi bi-person-gear"></i>
        <span class="ms-1">账号管理</span>
      </a>
    </li>
  </ul>
</header>
<main class="d-flex justify-content-center">
  <div class="card w-50 p-3 mt-2">
    <div class="d-flex my-2">
      <a class="btn btn-link w-auto" th:href="@{/manager/movies}">返回</a>
    </div>
    <div class="d-flex mb-3">
      <p class="mx-auto h4">编辑电影详情</p>
    </div>
    <form class="d-flex flex-column gap-2" method="post" id="form">
      <div>
        <label for="idInput" class="form-label">编号</label>
        <input id="idInput" class="form-control w-100"
               th:value="'#' + ${movie.getId()}" disabled>
      </div>
      <div>
        <label for="titleInput" class="form-label">标题</label>
        <input id="titleInput" class="form-control w-100"
               name="title" th:value="${movie.getTitle()}">
      </div>
      <div>
        <label for="directorInput" class="form-label">导演</label>
        <input id="directorInput" class="form-control w-100"
               name="director" th:value="${movie.getDirector()}">
      </div>
      <div>
        <label for="starringInput" class="form-label">主演</label>
        <input id="starringInput" class="form-control w-100"
               name="starring" th:value="${movie.getStarring()}">
      </div>
      <div>
        <label for="runtimeInput" class="form-label">时长</label>
        <input id="runtimeInput" class="form-control" type="number"
               name="runtime" th:value="${movie.getRuntime().toMinutes()}">
      </div>
      <div>
        <label for="descriptionInput" class="form-label">剧情简介</label>
        <textarea id="descriptionInput" class="form-control w-100" rows="8"
                  name="description" th:text="${movie.getDescription()}">
        </textarea>
      </div>
      <div class="d-flex gap-2 mt-2">
        <button class="btn btn-secondary flex-grow-1" type="reset">重置</button>
        <button class="btn btn-primary flex-grow-1"
                id="submitButton" type="submit">保存</button>
      </div>
    </form>
  </div>
</main>
<div id="idData" th:data-movie-id="${movie.getId()}"></div>
<script th:src="@{/js/axios.min.js}"></script>
<script th:src="@{/js/bootstrap.bundle.min.js}"></script>
<script>
const id = document.getElementById("idData").dataset.movieId;
const form = document.getElementById("form");
const submitButton = document.getElementById("submitButton");

async function submitForm() {
  const formData = new FormData(form);

  const data = {};
  formData.forEach((value, key) => {
    data[key] = value;
  });

  try {
    const response = await axios.put(`/api/movies/${id}`, data, {
      headers: {'Content-Type': 'application/json'}
    });
    if (response.status === 200) {
      alert("修改已保存");
      location.href = `/manager/movies/${id}`
    } else {
      console.log(response);
    }
  } catch (error) {
    if (!error.response) {
      console.log(error);
    } else if (error.response.status === 400) {
      alert(error.response.data);
    } else if (error.response.status === 409) {
      alert(error.response.data);
    } else {
      console.log(error);
    }
  }
}

submitButton.addEventListener("click", event => {
  event.preventDefault();
  submitForm();
});
</script>
</body>
</html>